<template>
  <div id="test" style="user-select: none">
    <button @click="fangda">放大</button>
    <button @click="suoxiao">缩小</button>
    <button v-show="isTrue" @click="gai">添加</button>
    <button v-show="!isTrue" @click="gai">移动</button>

    <div class="content">
      <div
        :style="{
          transform: 'scale(' + num + ')',
          position: 'relative',
          width: '100%',
          height: '100%',
        }"
        @mousedown="moveMouse"
        @click="getOffect"
      >
        <div
          v-for="(item, index) in boxArry"
          :ref="'biaozhu' + index"
          :key="index"
          :class="'biaozhu' + index == 'biaozhu' + b_i ? 'biaozhu b_border' : 'biaozhu'"
          :style="{
            width: item.width + 'px',
            height: item.height + 'px',
            position: 'absolute',
            left: item.left + 'px',
            top: item.top + 'px',
            background: 'rgba(43,100,206,0.3)',
            border: 'none',
          }"
          @mousedown.stop="move"
          @click="handelClick(index)"
        >
          <div v-if="b_i == index" class="r_b" @mousedown="mouseMove11"></div>
        </div>
        <div
          :style="{
            height: biaozhuHeight + 'px',
            width: biaozhuWidth + 'px',
            top: biaozhuTop + 'px',
            left: biaozhuLeft + 'px',
            position: 'absolute',
            background: 'rgba(43,100,206,0.3)',
          }"
        ></div>
        <img
          style="width: 100%; height: 100%; pointer-events: none"
          src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3479844176,2436830052&fm=26&gp=0.jpg"
          alt=""
          @mousedown="isTrue ? null : move"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { onMounted } from 'vue'
import { ref } from 'vue'
import { searchtaskPhotos } from '@/api/post'
import { createLocalStorage } from '@/utils/cache'
const paths = ref([])
const task_id = ref(123)
onMounted(() => {
  const url = location.search //获取url中"?"符后的字串
  const id = url.split('=')[1]
  task_id.value = id
  getPaths(id)
})
const ls = createLocalStorage({ prefixKey: 'login_' })
const user = ls.get('loginInfo')

async function getPaths(id) {
  const res = await searchtaskPhotos({ task_id: id })
  paths.value = res
  // console.log('path=' + paths.value[0].data_file_id)
}
export default {
  directives: {
    drag: function (el) {
      let dragBox = el //获取当前元素
      dragBox.onmousedown = (e) => {
        //算出鼠标相对元素的位置

        let disX = e.clientX - dragBox.offsetLeft
        let disY = e.clientY - dragBox.offsetTop
        console.log(disX, disY)
        document.onmousemove = (e) => {
          //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
          let left = e.clientX - disX
          let top = e.clientY - disY
          //移动当前元素
          dragBox.style.left = left + 'px'
          dragBox.style.top = top + 'px'
          console.log(left, top, '111111111')
        }
        document.onmouseup = (e) => {
          //鼠标弹起来的时候不再移动
          document.onmousemove = null
          //预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）
          document.onmouseup = null
        }
      }
    },
  },
  data() {
    return {
      num: 1,
      boxArry: [],
      isTrue: false,
      width: '',
      height: '',
      left: '',
      top: '',
      b_i: '',
      biaozhuHeight: 0,
      biaozhuWidth: 0,
      biaozhuTop: 0,
      biaozhuLeft: 0,
    }
  },

  methods: {
    getVuex() {
      console.log(this.$store.state.treeData)
    },
    commitVuex() {
      this.$store.commit('changeTreeData', { a: 1, b: 2 })
    },
    mouseOver2(e) {
      document.onmousedown = (e) => {
        let odiv = e.target //获取目标元素

        //算出鼠标相对元素的位置
        let disX = e.clientX - odiv.offsetLeft
        let disY = e.clientY - odiv.offsetTop
        let left = e.clientX - disX
        let top = e.clientY - disY

        //绑定元素位置到positionX和positionY上面
        this.positionX = top
        this.positionY = left
        console.log(this.boxArry, this.dragsIndex)
        //移动当前元素
        this.boxArry[this.b_i].width = left
        this.boxArry[this.b_i].height = top
      }
    },
    drags(e) {
      console.log(e)
    },
    mouseMove11(e) {
      // console.log(e,index)
      let odiv = e.target //获取目标元素

      //算出鼠标相对元素的位置
      let disX = e.clientX - odiv.offsetLeft
      let disY = e.clientY - odiv.offsetTop
      // debugger;
      e.target.onmousemove = (e) => {
        //鼠标按下并移动的事件
        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        // console.log('aaaaaaaaaaaaa',e)
        let left = e.clientX - disX
        let top = e.clientY - disY

        //绑定元素位置到positionX和positionY上面
        this.positionX = top
        this.positionY = left
        // console.log(this.boxArry,this.dragsIndex)
        //移动当前元素
        this.boxArry[this.b_i].width = left
        this.boxArry[this.b_i].height = top
        e.target.onmouseup = (e) => {
          e.target.onmousemove = null

          // document.onmouseup = null;
        }
      }
    },
    gai() {
      this.isTrue = !this.isTrue
    },
    getOffect(e) {
      console.log(e)
      document.onmouseup = null
      // this.left=e.offsetX
      //     this.top=e.offsetY
    },
    moveMouse(e) {
      let odiv = e.target //获取目标元素

      //算出鼠标相对元素的位置
      let disX = e.clientX - odiv.offsetLeft
      let disY = e.clientY - odiv.offsetTop
      console.log(disX, disY)
      if (this.isTrue) {
        // 拖动
        document.onmousemove = (e) => {
          //鼠标按下并移动的事件
          //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
          let left = e.clientX - disX
          let top = e.clientY - disY

          //绑定元素位置到positionX和positionY上面
          this.positionX = top
          this.positionY = left

          //移动当前元素
          odiv.style.left = left + 'px'
          odiv.style.top = top + 'px'
        }
        document.onmouseup = (e) => {
          document.onmousemove = null
          document.onmouseup = null
        }
      } else {
        // 添加div

        console.log(e)
        document.onmousemove = (e) => {
          //鼠标按下并移动的事件
          //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置

          let left = disX - odiv.getBoundingClientRect().x
          let top = disY - odiv.getBoundingClientRect().y

          console.log(e.target.offsetLeft)
          this.width = (e.clientX - disX) / this.num
          this.height = (e.clientY - disY) / this.num
          this.biaozhuWidth = this.width
          this.biaozhuHeight = this.height
          this.biaozhuLeft = left
          this.biaozhuTop = top
          document.onmouseup = (e) => {
            let left = disX - odiv.getBoundingClientRect().x
            let top = disY - odiv.getBoundingClientRect().y
            this.width = (e.clientX - disX) / this.num
            this.height = (e.clientY - disY) / this.num

            console.log(e.target.getBoundingClientRect(), disX, disY)
            if (this.width > 5 && this.height > 5) {
              this.boxArry.push({
                width: this.width,
                height: this.height,
                left: left,
                top: top,
              })
            }

            this.biaozhuWidth = 0
            this.biaozhuHeight = 0
            this.biaozhuLeft = 0
            this.biaozhuTop = 0
            document.onmousemove = null
            document.onmouseup = null
          }
        }
      }
    },
    move(e) {
      let odiv = e.target //获取目标元素

      //算出鼠标相对元素的位置
      let disX = e.clientX - odiv.offsetLeft
      let disY = e.clientY - odiv.offsetTop
      document.onmousemove = (e) => {
        //鼠标按下并移动的事件
        //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        let left = e.clientX - disX
        let top = e.clientY - disY

        //绑定元素位置到positionX和positionY上面
        this.positionX = top
        this.positionY = left

        //移动当前元素
        odiv.style.left = left + 'px'
        odiv.style.top = top + 'px'
      }
      document.onmouseup = (e) => {
        document.onmousemove = null
        document.onmouseup = null
      }
    },

    fangda() {
      this.num += 0.1
    },
    suoxiao() {
      this.num -= 0.1
    },
    tianjia() {
      this.boxArry.push({
        width: 100,
        height: 100,
        left: 20,
        top: 20,
      })
    },
    handelClick(i) {
      this.b_i = i
      console.log(i)
    },
    dragstart(event, data) {
      // console.log('drag')
      // event.dataTransfer.setData('item', data)
    },
    dragend(event) {
      // event.dataTransfer.clearData()
    },
  },
}
</script>
<style>
.el-dialog__body {
  padding: 10px 20px !important;
}
.content {
  width: 800px;
  height: 500px;
  background: red;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.drag_box {
  width: 150px;
  height: 90px;
  border: 1px solid #666;
  background-color: #ccc;
  /* 使用定位，脱离文档流 */
  position: relative;
  top: 100px;
  left: 100px;
  /* 鼠标移入变成拖拽手势 */
  cursor: move;
  z-index: 3000;
}
.b_border {
  border: 1px solid red !important;
}
.biaozhu {
  z-index: 9999999;
}
.r_b {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 20px;
  height: 20px;
  background: red;
}
.r_b:hover {
  cursor: se-resize;
}
/* } */
</style>
